<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>管理</el-breadcrumb-item>
			<el-breadcrumb-item>借阅管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索与添加区域 -->
			<el-row :gutter=20>
				<el-col :span="7">
					<el-input placeholder="请输入内容" class="input-with-select" v-model='queryInfo.query' clearable
						@clear="getUserList()">
						<el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addialogVisible = true">图书出管记录</el-button>
				</el-col>
			</el-row>
			<el-table :data="Borrowlist" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="书号" prop="bookid"></el-table-column>
				<el-table-column label="借阅人" prop="people"></el-table-column>
				<el-table-column label="借书时间">
					<template slot-scope='scope'>
						<el-date-picker style="width: 150px;" v-model="scope.row.jtime" type="date" readonly="true">
						</el-date-picker>
					</template>
				</el-table-column>
				<el-table-column label="还书时间">
					<template slot-scope='scope'>
						<el-date-picker style="width: 150px;" v-model="scope.row.htime" type="date" readonly="true">
						</el-date-picker>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="180">
					<template slot-scope='scope'>
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="updata(scope)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleBorrow(scope)">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>

		<!-- 对话框 -->
		<el-dialog title="借出图书" :visible.sync="addialogVisible" width="50%" :modal-append-to-body="false">
			<el-dialog title="请核对借阅人信息" :visible.sync="UserBoolean" width="50%" :modal-append-to-body="false">
				<el-form :model="name" :rules="addFormrules" ref="addFormref" label-width="70px">
					<el-form-item label="姓名" prop="name">
						<el-input readonly="true" v-model="name"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="UserBoolean = false">取 消</el-button>
					<el-button type="primary" @click="addBorrow()">确 定</el-button>
				</span>
			</el-dialog>
			<el-form :model="Borrow" :rules="addFormrules" ref="addFormref" label-width="70px">
				<el-form-item label="书号" prop="bookid">
					<el-input v-model="Borrow.bookid"></el-input>
				</el-form-item>
				<el-form-item label="卡号" prop="people">
					<el-input v-model="Borrow.people"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addbeforBorrow()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 确认借阅信息 -->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				// 获取用户列表的参数对象
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 2
				},
				borrow: [],
				Borrowlist: [],
				total: 0,
				addialogVisible: false,
				// 添加用户的表单数据
				UserBoolean: false,
				Borrow: {
					people: '',
					bookid: '',
					htime: '',
					jtime: '',
					id: '',
				},
				//添加表单的验证规则
				addFormrules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						min: 3,
						max: 10,
						message: '用户名长度在3到10位',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			updata(scope) {
				this.borrow = scope.row;
				console.log(this.borrow);
				this.borrow.htime = Date.now();
				this.$http.post("http://localhost:8989/reder/hbook", this.borrow).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						this.$message.success("还书成功");
						this.getUserList();
					} else {
						this.$message.error("还书失败");
					}
				}).catch(e => {
					console.log(e);
				})

			},
			addBorrow() {
				this.Borrow.jtime = Date.now();
				this.$http.post("http://localhost:8989/reder/add", this.Borrow).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						if (res.data.shu == 0) {
							this.$message.error("该书不存在或者已经借出");
						} else {
							this.$message.success(this.name + "借书成功");
							this.getUserList();
						}

					}
				}).catch(e => {
					console.log(e);
				});
				this.UserBoolean = false;
				this.addialogVisible = false
			},
			addbeforBorrow() {

				this.$http.post("http://localhost:8989/reder/addBefor", this.Borrow).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						this.name = res.data.name;
					}
				}).catch(e => {
					console.log(e);
				});
				this.UserBoolean = true;
			},
			deleBorrow(scope) {
				this.borrow = scope.row;
				console.log(this.borrow);
				this.$http.post("http://localhost:8989/reder/dele", this.borrow).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						this.$message.success("删除成功");
						this.getUserList();
					} else {
						this.$message.error("删除失败");
					}
				}).catch(e => {
					console.log(e);
				})
			},
			getUserList() {
				this.$http.post("http://localhost:8989/reder/find", this.queryInfo).then(res => {
					console.log(res);

					if (res.data.status !== 200) return this.$message.error("获取借阅列表失败");
					this.Borrowlist = res.data.data.list;
					console.log(this.Borrowlist);
					this.total = res.data.total;
					console.log(this.total);
				}).catch(e => {
					console.log(e);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.getUserList();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.getUserList();
			},
			// 监听状态的改变
			userStateChangee(userinfo) {
				console.log(userinfo);
				this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`).then(res => {
					console.log(res);
					if (res.data.meta.status !== 200) {
						userinfo.mg_state = !userinfo.mg_state;
						return this.$message.error('更新用户状态失败');
					}
					this.$message.success('更新用户状态成功');
				});
			}
		},
		created() {
			this.getUserList();
		}

	}
</script>

<style scoped>
</style>
